import React, { Component, createRef } from "react";
import { Toast } from "antd-mobile";
import { connect } from "react-redux";
import yhTools from "@/tools/yh";

// 组件
import MainLayout from "../../../component/mainLayout/mainLayout";
import ShareModal from "./shareModal";
import "./iframe.scss";

/**
 * 描述：
 * 作者：zenghq
 * 日期：2020-06-08
 */
const shareUrl =
	"https://jrcdn.yonghui.cn/yhjr/yhjrActivity/xhf/index.html#/billReportH5";
@connect(state => state)
class iframe extends Component {
	constructor(props) {
		super(props);
		this.state = {
			title: ""
		};
		this.shareObj = {};
		this.shareModal = createRef(null);
		this.ref = createRef(null);
		this.maps = {
			0: () => {
				let index_fromType = sessionStorage.getItem("index_fromType");
				if (index_fromType && index_fromType === "app") {
					yhTools.closePage();
				} else {
					this.props.history.go(-1);
				}
			},
			1: url => this.props.history.push(url),
			2: (url, data) => {
				const masterTitle = data.masterTitle || "****";
				this.shareModal.current.setInviteInfo({
					0: {
						parentTitle: `我的年度账单关键字竟然是${masterTitle}`,
						subTitle: "查看年度账单关键字，回顾我的2020",
						shareUrl
					},
					1: {
						parentTitle: `我的年度账单关键字竟然是${masterTitle}`,
						subTitle: "查看年度账单关键字，回顾我的2020",
						shareUrl
					},
					2: {
						linkTitle: `我的关键字竟然是${masterTitle}，点击${shareUrl}查看~`
					}
				});
			}
		};
	}
	/*******************生命周期 start************************/
	componentDidMount = () => {
		Toast.loading("加载中...", 30);
		this.ref.current.onload = () => {
			Toast.hide();
			this.postMessage(this.ref.current);
		};
	};
	onMessage() {
		window.addEventListener("message", event => {
			if (event.data && event.data.type != null) {
				this.maps[event.data.type](event.data.url, event.data.data);
			}
		});
	}
	postMessage(iframe) {
		const { state = {} } = this.props.location;
		const { src } = state;
		const { authHeaderStr } = this.props.getAppPlatformsDatas;
		iframe.contentWindow.postMessage(
			{
				token: authHeaderStr
			},
			src
		);
		this.onMessage();
	}

	/**渲染 */
	render() {
		let index_fromType = sessionStorage.getItem("index_fromType");
		const { state = {} } = this.props.location;
		const { src, title = "年度账单" } = state;
		let versionCode = this.props.getAppPlatformsDatas.sdkVersionCode;
		const _pageParams = {
			header: {
				title,
				goToApp: index_fromType && index_fromType === "app"
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		return (
			<MainLayout pageParams={_pageParams}>
				<iframe
					ref={this.ref}
					className="iframe"
					id="active-iframe"
					src={src}
					frameBorder="0"
				></iframe>
				<ShareModal
					versionCode={versionCode}
					ref={this.shareModal}
				></ShareModal>
			</MainLayout>
		);

		// return (
		// 	<>
		// 		<iframe
		// 			ref={this.ref}
		// 			className="iframe"
		// 			id="active-iframe"
		// 			src={src}
		// 			frameBorder="0"
		// 		></iframe>
		// 	</>
		// );
	}
}

export default iframe;
